<template>
  <div class="login-container">
    <!-- 绑定验证规则 :rules=""-->
    <!-- :model="userForm"  对应data中定义的属性-->
    <!-- ref="loginForm"  可通过this.$refs.loginForm来获取表单对象-->
    <el-form ref="loginForm" :model="userForm" :inline="false" size="medium" class="loginForm" :rules="rules">
      <el-form-item>
        <div class="loginTitle">系统登录</div>
      </el-form-item>
      <el-form-item prop="username">
        <el-input v-model="userForm.username" placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="userForm.password" type="password" placeholder="请输入密码" />
      </el-form-item>
      <el-form-item prop="code">
        <el-row :gutter="20">
          <el-col :span="16" :offset="0">
            <el-input v-model="userForm.code" placeholder="请输入验证码" />
          </el-col>
          <el-col :span="8" class="codeimg" :offset="0">
            <img src="">
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-button type="primary" size="default" class="btn" @click.native.prevent="loginHandler">登录</el-button>
          </el-col>
          <el-col :span="12">
            <el-button type="default" size="default" class="btn">注册</el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import { Message } from 'element-ui'
export default {
  data() {
    return {
      userForm: {
        'username': 'aben',
        'password': '123456',
        'code': '1234'
      },
      rules: {
        username: [{ required: true, trigger: 'change', message: '请输入用户名' }],
        password: [{ required: true, trigger: 'change', message: '请输入密码' }],
        code: [{ required: true, trigger: 'change', message: '请输入验证码' }]

      },
      loading: false,
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    loginHandler() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          // console.log('验证通过');
          this.loading = true
          // 登录
          this.$store.dispatch('user/login', this.userForm).then(() => {
            // this.$router.push({path:this.redirect||'/',query:this.otherQuery})
            // this.loading=false;
            console.log(this.redirect)
            this.$router.push({ path: this.redirect || '/' })
            this.loading = false
            // Message.info('登录成功')
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('验证失败')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss">
.login-container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .loginForm {
    height: 350px;
    width: 400px;
    border-radius: 10px;
    box-shadow: 0 0 25px #0aa6af;
    padding: 20px 35px;

    .loginTitle {
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 600;
      font-size: 24px;

    }

    .codeimg {
      border: 1px solid #dcdfe6;
      cursor: pointer;
    }

    .btn {
      width: 100%;
    }
  }
}
</style>
